<template>
  <div id="newLogin" :style="{'height': login_page_mode == 0?'auto':'auto'}">
    <div v-if="login_type == 1">
      <!-- logo标题-->
      <div class="logoTitle" v-if="login_page_mode == 0" :style="'var(--themeBaseColor)' == '' ? 'background-image: linear-gradient(#fe833f, #fea55e);' : 'background-color:' + 'var(--themeBaseColor)' + ';'">
        <div>
          <img :src="title.mailInfo_logo ? title.mailInfo_logo : require('../../assets/images/photo-mr.jpg')" />
        </div>
        <div class="title">
          <div style="font-size: 1.5rem;">{{ title.mainHeading }}</div>
          <div style="font-size: 0.875rem; margin-top: 0.15rem;">{{ title.subheading }}</div>
        </div>
      </div>
      <img v-else :src="login_banner_url" style="width: 100%;"/>
      <!-- 登录-->
      <div class="login" :style="{'marginBottom': login_page_mode == 0?'0':'80px','marginTop':login_page_mode == 0?'-1rem':'-1.5rem','position':login_page_mode == 1?'relative':''}">
        <div class="head">
          <div class="iconfont icon-member-left icon" @click="$router.go(-1)"></div>
          <div class="name t-l">{{ $i18n.t('base.login') }}</div>
          <van-button v-if="supplier_alone_id" round type="info" size="small" color="var(--themeBaseColor)" @click.stop="switchLanguage">中/Pyc</van-button>
        </div>
        <car_number_keyboard_popup v-if="car_manage_is_register_bind && mobile_login_code && is_enable == 0" ref="carInfo"></car_number_keyboard_popup>
        <div v-if="appShow">
          <!-- 输入框-->
          <div class="inputBox">
            <van-form>
              <ul>
                <!-- 手机号-->
                <li v-if="mobile_login_code == 1 || phoneAndPassword">
                  <div v-if="country_code == 1 && mobile_login_code == 1" style="padding: 0 0 0 1.5rem;">
                    <!-- style="margin-left: 1.5rem;padding-right: 2rem;" -->
                    <van-cell :border="true" :title="$i18n.t('base.countryCode')" is-link required @click="openPopUp = true">
                      <template #title>
                        <span>{{ $i18n.t('base.countryCode') }}</span>
                      </template>
                      <template #default>
                        <span>+{{ form.country }}</span>
                      </template>
                    </van-cell>
                    <!-- <van-field :label="$i18n.t('base.countryCode')" required v-model="form.country" placeholder="+86" type="number"  maxlength="5" class="country-style"/> -->
                  </div>
                  <van-field v-model.trim="form.mobile" :type="email_login?'text':'number'" clearable :placeholder="email_login?`请输入您的手机号${mobile_login_code == 1?'':'或邮箱'}`: $i18n.t('base.enterPhoneNumber')" :rules="[{ required: true, message: '' }]" :mode="false">
                    <template #label>
                      <div class="slotCode">
                        <img src="../../assets/images/loginPhone.png" style="width: 0.719rem; height: 1.063rem;" />
                        <div class="iconfont icon-advertise-next icon" style="margin-left: 0.95rem;"></div>
                      </div>
                    </template>
                  </van-field>
                  <div></div>
                  <div class="label" v-if="mobile_login_code && registryEntry">未注册的手机号验证后自动创建（{{nameOfTheMall}}）账户!</div>
                </li>
                <!-- -->
                <!-- 账号-->
                <li v-if="accountAndPasswordLogin">
                  <van-field v-model.trim="form.mobile" type="text" clearable placeholder="请输入账号" :rules="[{ required: true, message: '' }]" :mode="false">
                    <template #label>
                      <div class="slotCode">
                        <img src="../../assets/images/login_user.png" style="width: 1rem; height: 1.063rem;" />
                        <div class="iconfont icon-advertise-next icon"></div>
                      </div>
                    </template>
                  </van-field>
                  <div></div>
                </li>
                <!-- -->
                <!-- 密码-->
                <li v-if="phoneAndPassword || accountAndPasswordLogin">
                  <van-field
                    v-model.trim="form.password"
                    clearable
                    :type="passwordShow ? 'text' : 'password'"
                    :placeholder="$i18n.t('base.enterPassword')"
                    :rules="[{ required: true, message: '' }]"
                    style="margin-top: 20px;"
                    :mode="false"
                  >
                    <template #label>
                      <div class="slotCode">
                        <div style="width: 1.188rem;">
                          <img
                            :src="passwordShow ? require('@/assets/images/view_password.png') : require('@/assets/images/no_view_password.png')"
                            :style="passwordShow ? 'width: 1.094rem;height: 0.719rem;' : 'width: 1.188rem;height: 0.563rem;'"
                            @click="viewPasswordSwitching"
                          />
                        </div>
                        <div class="iconfont icon-advertise-next icon"></div>
                      </div>
                    </template>
                    <template #button style="margin-left: -20px;">
                      <router-link :to="fun.getUrl('findpwd')" v-if="accountAndPasswordLogin && need_family" style="font-size: 0.75rem; color: #666;">{{ $i18n.t('base.forgotPassword') }} ？</router-link>
                      <router-link :to="fun.getUrl('findpwd')" v-if="phoneAndPassword" style="font-size: 0.75rem; color: #666;">{{ $i18n.t('base.forgotPassword') }} ？</router-link>
                    </template>
                  </van-field>
                  <div></div>
                </li>
                <!-- -->
                <!-- 图形验证码-->
                <li style="margin-top: 15px;" v-if="imgcode && mobile_login_code == 1">
                  <van-field v-model.trim="form.captcha" clearable type="text" placeholder="请输入图形信息" :rules="[{ required: true, message: '' }]" :mode="false">
                    <template #label>
                      <div class="slotCode">
                        <img src="../../assets/images/ht_bg_bgimg.png" style="width: 1rem; height: 0.875rem;" />
                        <div class="iconfont icon-advertise-next icon"></div>
                      </div>
                    </template>
                    <template #button style="margin-left: -20px; display: flex; align-items: center;">
                      <img :src="imgcode" style="width: 6.25rem; height: 1.875rem;" @click="getimgdata()" />
                    </template>
                  </van-field>
                  <div></div>
                </li>
                <!-- -->
                <!-- 短信验证码-->
                <li v-if="mobile_login_code == 1">
                  <van-field v-model.trim="form.code" autocomplete="new-password" clearable type="digit" :placeholder="$i18n.t('base.enterVerificationCode')" :rules="[{ required: true, message: '' }]" style="margin-top: 20px;" :mode="false">
                    <template #label>
                      <div class="slotCode">
                        <img src="../../assets/images/auth_code.png" style="width: 0.875rem; height: 1rem;" />
                        <div class="iconfont icon-advertise-next icon"></div>
                      </div>
                    </template>
                    <template #button style="margin-left: -20px;">
                      <div style="font-size: 12px;" :style="'color:' + 'var(--themeBaseColor)'" @click="verificationCode">
                        {{ btnText }}
                      </div>
                    </template>
                  </van-field>
                  <div></div>
                </li>
              </ul>
              <!-- -->
              <div class="passwordLogin" :style="'color:' + 'var(--themeBaseColor)'" v-if="loginModeSwitchButton">
                <div v-if="!mobile_login_code && loginToSwitch.mobile_login_code" @click="tapChange('mobile_login_code')">{{ $i18n.t('base.changePhoneCode') }}</div>
                <div v-if="!phoneAndPassword && loginToSwitch.is_enable" @click="tapChange('phoneAndPassword')">{{ $i18n.t('base.changePhonePassword') }}</div>
                <div v-if="!accountAndPasswordLogin && enable_btn == '1'" @click="tapChange('accountAndPasswordLogin')">
                  切换账号密码
                </div>
              </div>
              <!-- <div class="yearBox passwordLogin" @click="authYear" v-if="is_year_end_box_login">授权登录</div> -->
            </van-form>
          </div>
          <div class="loginButton">
            <div @click="mobile_login" class="box" :style="loginStatus ? 'background-color:' + 'var(--themeBaseColor)' : 'background-color:' + '#d4d4d4'" v-if="!appPlatform">
              <div class="iconfont icon-fontclass-jiantou" style="font-size: 28px; position: absolute; top: 16px; left: 17px; transform: rotate(90deg); color: white;"></div>
            </div>
            <div
              v-if="appPlatform"
              :style="loginStatus ? 'background-color:' + 'var(--themeBaseColor);' + 'color: white;' : 'background-color:' + '#e0e0e0'"
              style="border-radius: 0.3rem; padding: 0.6rem; margin-left: 2rem; margin-right: 2rem; font-size: 1rem;"
              @click="mobile_login"
            >
              登录
            </div>
            <div style="margin-top: 0.8rem;" v-if="(!registryEntry && !mobile_login_code) || (enable_btn == '1' && !mobile_login_code && !registryEntry)">
              {{ $i18n.t('base.noAccountClickHere') }}<span :style="'color:' + 'var(--themeBaseColor)'" @click="toRegisterText"> {{ $i18n.t('base.register') }}</span>
            </div>
          </div>

          <!-- app 钱包登录，如为首次登录需要跳转邀请页面 -->
          <div
            v-if="this.fun.isWalletApp()"
            style="margin-top: 20px; display: flex; align-items: center; flex-direction: column;"
            @click="walletAppLogin">
            <div style="color: #999;">—— 其他登录方式 ——</div>
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/memberV2/member_a(205).png"
              style="width: 58px; height: 58px;" />
            <div style="font-size: 14px; font-weight: bold;">钱包登录</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二种登录方式 -->
    <div class="login_type2" v-if="login_type == 2 && !appPlatform">
      <div style="position: relative;">
        <c-title :hide="false" text="用户登录"></c-title>
        <img style="width: 20%; height: 40px; position: absolute; display: block; left: 74%; top: 11rem; z-index: 999;" :src="imgcode" @click="getimgdata()" v-if="imgcode && pc_bind_mobile == 1" />
      </div>
      <div class="wrp_code_2" v-if="wechat_qrcode_config.wechat_login_type == 2 && pc_bind_mobile != 1">
        <div class="code_title">微信登录</div>
        <img class="lightBorder_2" v-if="account_url" :src="account_url" alt="" />
        <div class="tips_title">
          <p>请使用微信扫描二维码关注公众号登录</p>
        </div>
      </div>
      <div id="login_box" style="padding-top: 0;" v-if="pc_bind_mobile == 1">
        <ul class="login_info">
          <li style="border-bottom: none;">
            <p class="bind-tips">绑定手机号开通专属服务</p>
          </li>
          <li>
            <van-field v-model="mobileForm.mobile" label="" maxlength="20" center style="font-size: 16px;" clearable placeholder="请输入手机号" />
          </li>
          <li v-if="imgcode">
            <van-field v-model="mobileForm.captcha" center style="font-size: 16px;" label="" placeholder="请输入右侧图形验证码" />
          </li>
          <li class="code">
            <van-field v-model.trim="mobileForm.code" center clearable placeholder="请输入验证码" style="font-size: 16px;">
              <template #button>
                <van-button type="default" size="small" center :disabled="btnTag" round :text="btnText" @click.native="verificationCode_V2"></van-button>
              </template>
            </van-field>
          </li>
        </ul>
        <div class="login_btn">
          <button class="exclusive" @click="getPrepBind">开通专属服务</button>
        </div>
      </div>
      <div id="login_code" v-if="wechat_qrcode_config.wechat_login_type == 1 && pc_bind_mobile != 1"></div>
      <div style="padding-bottom: 2rem;" v-if="wechat_qrcode_config.is_wechat_login == 0 && pc_bind_mobile != 1" :style="{ marginTop: wechat_qrcode_config.wechat_login_type == 2 ? '3rem' : '' }">
        其他登录方式
        <span style="color: #297dd9; cursor: pointer;" @click="tapChange(2)">
          <i class="iconfont icon-verification_phone"></i>
          手机号登录
        </span>
      </div>
    </div>
    <!-- 登陆协议-->
    <div class="agreement set-pc-style"
      v-if="isShowBottom &&((registrationProtocol.status == 1 && !appPlatform ||platformAgreement.status == 1 && !appPlatform || appPlatform && wetach_login || appPlatform && appShow)||isWalletLogin)">
      <!-- app 微信登陆 -->
      <div v-if="appPlatform && appShow && wetach_login" style="margin-bottom: 20px; display: flex; align-items: center; color: #6e6e79; letter-spacing: 0.5px;" @click="weixin">
        <div>其他方式登录</div>
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/weixin_icon.png" style="width: 30px; height: 30px; margin-left: 8px;" />
      </div>
      <div
        v-if="appPlatform && !appShow && wetach_login"
        style="margin-left: 25px; margin-right: 45px; text-align: center; background-color: #08af08; border-radius: 3px; padding: 10px; color: white; margin-bottom: 30px; font-size: 15px;"
        @click="weixin"
      >
        使用微信一键登录
      </div>

      <div class="mb-40" v-show="popUpShow"></div>
      <div style="display: flex;position: relative;">
        <!-- 飘窗-->

        <div class="promptWindow" v-if="popUpShow">
          <div class="content">
            {{ $i18n.t('base.pleaseReadAndAgree') }}
          </div>
          <div class="triangle"></div>
        </div>
        <div style="margin-top: 3px;">
          <van-checkbox v-model="form.login_checked" :checked-color="'var(--themeBaseColor)'" icon-size="13.5px"> </van-checkbox>
        </div>
        <!-- app协议 -->
        <template v-if="!isInternational">
          <div class="text" v-if="appPlatform">
            我已阅读并同意<span :style="'color:' + 'var(--themeBaseColor)'" @click="appAgreement('agreement')">《用户协议》</span>
            <span
              ><a @click="appAgreement('privacy')" :style="'color:' + 'var(--themeBaseColor)'">《隐私政策》</a>,并授权[{{ nameOfTheMall }}]使用该[{{ nameOfTheMall }}]账户信息
              (如昵称,头像,收货地址等)进行统一管理</span
            >
          </div>
          <!-- 平台协议 -->
          <div class="text" v-else>
            我已阅读并同意<span v-if="registrationProtocol.status == 1" :style="'color:' + 'var(--themeBaseColor)'" @click="openOpenPlatformAgreement('user')">《{{ registrationProtocol.title }}》</span>
            <span
              ><a v-if="platformAgreement.status == 1" @click="openOpenPlatformAgreement('platform')" :style="'color:' + 'var(--themeBaseColor)'">《{{ platformAgreement.title }}》</a>,并授权[{{
                nameOfTheMall
              }}]使用该[{{ nameOfTheMall }}]账户信息 (如昵称,头像,收货地址等)进行统一管理</span
            >
          </div>
        </template>

        <template v-if="isInternational">
           {{ $i18n.t('base.agreeToRegisterLogin') }}
        </template>
      </div>
    </div>
    <!-- 会员id变更时提示 -->
    <van-popup v-model="showChangeID" class="changeId_popup" :close-on-click-overlay="false" round>
      <div class="changeId_main">
        <i class="iconfont icon-toast_warn"></i>
        <p class="changeId_warnTitel">重要提示</p>
        <p class="changeId_warnText">
          当前绑定操作会导致用户ID变更：原会员ID:{{ changidInfo.uid }}，变更后会员ID:{{ changidInfo.change_uid }}；绑定后所有数据记录以变更后会员ID{{ changidInfo.change_uid }}为准，
          <em style="color: #d53125;">原会员ID{{ changidInfo.uid }}数据将被删除，数据({{balance}},{{point}},优惠券除外)不会进行合并，且不可找回！</em>请谨慎操作！ <br />绑定后请注意重新生成推广海报、重新发送推广链接！
        </p>
        <span class="changeId_Btn" @click="register_V2">确认合并</span>
        <span class="changeId_Btn changeId_Btn_other" @click="showChangeID = false">取消</span>
      </div>
    </van-popup>
    <!-- 用协议弹窗-->
    <van-popup v-model="openPlatformAgreement" style="border-radius: 0.656rem;">
      <div class="city-info">
        <van-nav-bar :title="popoverProtocolContent.title" fixed />
        <div style="height: 2.5rem; clear: both;"></div>
        <div id="a_content" v-html="popoverProtocolContent.content"></div>
        <div
          style="width: 12.75rem;
            height: 2.313rem;
            background-color: #f04d4d;
            border-radius: 0.188rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.193rem;
            margin: 0 auto;
            margin-top: 1.5rem;
            margin-bottom: 1.063rem;"
          @click="openPlatformAgreement = false"
        >
          确定
        </div>
      </div>
    </van-popup>
    <countryCode :openPopUp.sync="openPopUp" :optValue.sync="form.country"></countryCode>
  </div>
</template>

<script>
import new_login_controller from "./new_login_controller";
export default new_login_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#newLogin {
  background-color: white;
  overflow: hidden;
  min-height: 100vh;
  position: relative;
  .logoTitle {
    display: flex;
    min-height: 120px;
    padding: 2rem 1.3rem 2.5rem 0.906rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    div {
      letter-spacing: 0.8px;
    }
    .title {
      margin-left: 0.563rem;
      color: white;
      text-align: left;
    }
    img {
      width: 3.156rem;
      height: 3.156rem;
      border-radius: 50px;
    }
  }

  .login {
    width: 100%;
    border-radius: 1.563rem 1.563rem 0 0;
    background-color: #fff;
    padding-top: 36px;
    padding-bottom: 19px;

    .head {
      display: flex;
      align-items: center;
      margin: 0 28px;
      font-weight: 550;

      .icon {
        font-size: 20px;
        font-weight: 600;
      }

      .name {
        font-size: 1.5rem;
        margin-left: 10px;
        flex: 1;
      }
    }

    .inputBox {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-left: 5px;
      padding-right: 20px;
      text-align: left;
      margin-top: 25px;

      van-form {
        width: 100%;
      }

      .slotIphone {
        display: flex;
        align-items: center;
        color: #00001c;
        font-size: 1rem;
        margin-left: 15px;
        margin-top: -0.2rem;

        .icon-jiahao {
          transform: scale(0.6);
          margin-right: -0.2rem;
        }

        .icon {
          width: 0.375rem;
          height: 0.75rem;
          margin-top: -0.5rem;
          margin-left: 0.35rem;
        }
      }

      .label {
        color: #4e4e4e;
        transform: scale(0.8);
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .slotCode {
        color: #00001c;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.2rem;

        .icon {
          width: 0.66rem;
          height: 1.35rem;
          margin-left: 0.688rem;
        }
      }

      .passwordLogin {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #f14e4e;
        letter-spacing: 0.6px;
        font-size: 12px;
        font-weight: 550;
        margin-top: 17px;
        margin-left: 33px;
        margin-right: 15px;
      }
    }

    .loginButton {
      color: #6e6e79;
      font-size: 12px;
      margin-top: 3.469rem;

      .box {
        border-radius: 50%;
        width: 65px;
        height: 65px;
        position: relative;
        margin: 0 auto;
      }

      img {
        width: 55px;
        width: 55px;
      }
    }
  }

  img {
    margin: 0;
  }

  .code_title {
    text-align: center;
    font-size: 20px;
  }

  .wrp_code_2 {
    text-align: center;
    width: 300px;
    height: 300px;
    margin: 5px auto 0 auto;
  }

  .lightBorder_2 {
    width: 280px;
    height: 280px;
  }

  // 新页面css
  #login_box {
    // height: 39.1875rem;
    background-color: #fff;
    padding-top: 2.5rem;
    padding-bottom: 1.25rem;

    .login_header {
      margin: 0 auto;
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .login_info {
      margin: 1.25rem;

      li {
        margin: 0 auto;
        width: 20.625rem;
        display: flex;
        font-size: 16px;
        height: 2.5rem;
        line-height: 2.5rem;
        margin-top: 1.25rem;
        border-bottom: solid 0.0625rem #ccc;
        position: relative;

        input {
          width: 12.5rem;
          border: none;
        }

        span {
          font-size: 14px;
          //position: absolute;
          right: 0;
          color: #333;
        }

        .img {
          width: 2.5rem;
          overflow: hidden;
          position: relative;

          img {
            position: absolute;
            margin-top: 26%;
            width: 48%;
            left: 0.625rem;
          }
        }
      }
    }

    .login_btn {
      margin-top: 2.8rem;

      button {
        width: 20.625rem;
        height: 2.8125rem;
        font-size: 16px;
        margin-bottom: 1.25rem;
        border-radius: 1.875rem;
      }

      .exclusive {
        background: #f15353;
        color: #fff;
        border: none;
      }

      .register {
        background: #fff;
        color: #f15353;
        border: solid 0.0625rem #f15353;
      }
    }
  }

  #login_box .login_info li span {
    color: #f15353;
  }

  .login_info .van-cell {
    padding: 0;
    height: 100%;
  }

  .changeId_popup {
    letter-spacing: 0;

    .changeId_main {
      padding: 2rem;
      width: 18.875rem;
      margin: 0 auto;

      i {
        font-size: 3rem;
        color: rgb(213, 49, 37);
      }

      .changeId_warnTitel {
        margin: 0.75rem 0;
        font-size: 1.125rem;
        font-weight: bold;
        color: #000;
      }

      .changeId_warnText {
        text-align: left;
        font-size: 0.875rem;
      }

      .changeId_Btn {
        width: 5rem;
        border: 1px solid #c5c5c5;
        background: #d53125;
        border-radius: 0.35rem;
        color: #fff;
        height: 2rem;
        display: block;
        line-height: 2rem;
        margin: 1rem auto 0;
      }

      .changeId_Btn_other {
        opacity: 0.5;
      }
    }
  }

  .city-info {
    border-radius: 0.656rem;
    width: 20rem;
    height: 32rem;
    margin: 0 auto;
    // padding-bottom: 5rem;
    background: #fff;

    header {
      border-radius: 0.656rem 0.656rem 0 0;
    }

    #a_content {
      // width: 14.438rem;
      margin: 0.5rem 0.9rem;
      height: 24rem;
      overflow-y: scroll;

      ::v-deep img {
        max-width: 100%;
        display: flex;
      }
    }
  }

  .promptWindow {
    // margin-bottom: 6px;
    // margin-left: -3px;
    position: absolute;
    top:-2.1875rem;
    .content {
      background-color: black;
      width: 8rem;
      height: 30px;
      border-radius: 3px;
      color: white;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .triangle {
      width: 0;
      height: 0;
      padding: 0;
      margin: 0;
      border-top: black;
      border: 5px solid rgba(200, 200, 200, 0);
      border-top-color: black;
      position: absolute;
      left:2px;
      // bottom:-1px;
      // left: 3px;
    }
  }
  .mb-40 {
    height: 35px;
    clear: both;
  }

  .agreement {
    text-align: left;
    margin-left: 15px;
    color: #666;
    padding-bottom: 80px;

    .icon {
      color: #b8b8b8;
      font-size: 13px;
      margin-top: 2px;
    }

    .text {
      font-size: 12px;
      letter-spacing: 1px;
      line-height: 18px;
      width: 87%;
      margin-left: 0.5rem;
    }
  }

  ::v-deep .van-field__control {
    font-size: 16px;
  }

  ::v-deep .van-field__label {
    margin-right: 3px;
  }

  ::v-deep .van-cell {
    display: flex;
    align-items: center;
  }

  ::v-deep .van-checkbox {
    overflow: unset;
  }

  ::v-deep .van-button--default {
    background-color: #ebebeb;
  }

  .country-style ::v-deep.van-field__label {
    font-weight: 550;
    font-size: 16px;
    color: #00001c !important;
  }
}
</style>
